<template>
    <div id="bar">
        <router-link to="./home">
        <span class="iconfont icon-fang1"></span>
        <p>主页</p>
        </router-link>
       <router-link to="./kandian">
       <span class="iconfont icon-kandian"></span>
       <p>看点</p>
       </router-link>
       <router-link to="./blink">
       <span class="iconfont icon-fang"></span>
       <p>办公</p>
       </router-link>
       <router-link to="./news">
       <span class="iconfont icon-guanzhu"></span>
       <p>关注</p>
       </router-link>
       <router-link to="./me">
       <span class="iconfont icon-wode"></span>
       <p>我的</p>
       </router-link>
       <!-- <router-view></router-view> -->
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

   #bar{
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
       justify-content: space-evenly;
       border-top: #ccc 1px solid;
       padding: 5px 0 5px 0;
       background: #fff;
    }
    #bar a{
        
        text-decoration: none;
        color: #999;
        
        text-align: center;
        
       
    } 
     #bar p{
        font-size: 12px;
        color: #999;
     }
    #bar span{
        font-size: 20px;
        color: #999;
    }
    #bar .router-link-active span,#bar .router-link-active p{
        color: blue;
    }
</style>